引入腾讯地图,电脑内存CPU占比升高,卡顿问题 |
您所在的位置:网站首页 › 高德地图web 20卡顿 › 引入腾讯地图,电脑内存CPU占比升高,卡顿问题 |
最近在做一个项目,需要应用腾讯地图,但是每当进入包含腾讯地图的页面,电脑内存占比就会持续升高,没过几次,电脑就会变的非常卡顿, 这是没有进入地图页面之前的内存占比: 这是进入地图页面几次后的内存占比,并且该内存占比并不会下降的很快,对于一般的笔记本而言就会造成非常严重的卡顿问题。 查询了许多资料都没有找到相对应的解决方法,最后还是前辈一针见血的指出问题,可能是地图实例被多次创建,占用大量缓存的问题,找到问题所在就非常容易解决问题了,这里有两种方式: 1、可以通过对地图的DOM节点进行删除的操作,在页面退出销毁之前,清除地图所在的DOM节点,可以通过v-if进行实现 2、这一种是比较推荐的方式,在腾讯地图官方文档中查找销毁地图实例的方法,可以通过map.destroy()方法,在页面销毁之前进行地图实例的销毁 map.destory()再次进入地图页面可以看到,电脑的内存占比不会持续升高,会维持在一个固定的范围,并且在退出页面之后,内存的释放也非常迅速,不会造成应用网站的卡顿现象。 除此之外,除了内存的升高,在地图组件或者其他组件引入的时候还要注意cpu的占用情况,此处非常注意,在使用需要加载大量资源创建实例的组件的时候,不论是什么项目,以vue为例,尽量不要将创建的实例存储在data中,这样会在进入该页面的时候占用耗费大量资源,导致网页应用卡顿,如图: 上图可以看到,cpu的占用耗费是非常高的,并且难以下降 这里有一个解决办法,就是在vue页面内声明一个全局变量用来接收实例对象,在页面的销毁的时候在进行释放,这样操作会有效减少cpu的占用情况,提升网页应用运行速率。 以上仅为个人见解 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |